<template>
	<view>
		<view class="box">
			<view class="search_box">
				<view class="flex_box aic">
					<view class="re mr20" @tap="back">
						<image src="="/static/icon_arrow_1.png" class="vt img6"></image> iew>
						<view class="re item">
							<input type="text" class="ipt_search" v-model="keywords" placeholder="请输入您想搜索的挖机型号"
								placeholder-style="color: #353535" @confirm="keywordConfirm" />
						</view>
						<view class="pl20 fs26 cor_333" @tap="clickSearch">搜索</view>
						<view class="pl20 df fs26 cor_333" @click="screenShow();">
							<view>筛选</view>
							<image src="="/static/icon_screen.png" class="ml5 img7"></image>
						</view>
					</view>
				</view>

				<view class="menu_content_box_page">
					<view class="pl16 pr16">
						<view class="pt20">
							<view class="df fldr fw jcsb">
								<view class="shop_price_item" v-for="(item,index) in list" :key="index"
									@tap="toDetail(item.id)">
									<view class="re">
										<image src="="/static/shop_img_1.png" class="img2 vt"></image> /view>
										<view class="content_area">
											<view class="fs26 lh36 ell">{{item.title}}</view>
											<view class=" fs26 lh36 ell">{{item.pYear}}年 {{item.hours}}小时</view>
											<view class="mt25 flex_box aic">
												<view class="item">
													<view class="fs30 fwb cor_F23">
														<text class="fs34">￥{{item.price}}</text>万
													</view>
												</view>
												<image src="="/static/icon_location.png" class="img3"></image>
												<view class="ml5 fs24 fwb cor_808">{{item.place}}</view>
											</view>
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>

					<!-- 筛选弹窗 -->
					<view class="screen_bomb_fix" :class="screenFlag ? 'show' : ''">
						<view class="screen_popup_box">
							<view class="screen_content">
								<view class="ml5 fs28 fwb cor_5D5">筛选</view>
								<!-- 挖机类型 -->
								<view class="mt30">
									<view class="ml5 fs26 cor_5D5">挖机类型</view>
									<view class="unlimited_box" @tap="typeId=0" :class="{'active':0== typeId}">不限
									</view>
									<view class="df fldr fw">
										<!-- <view class="active type_tab">履带式</view> -->
										<view class="type_tab" :class="{'active':item.id== typeId}"
											@tap="typeCheck(item)" v-for="(item, index) in filters.types" :key="index">
											{{item.name}}
										</view>
									</view>
								</view><!-- 挖机类型 -->

								<!-- 价格区间 -->
								<view class="mt30">
									<view class="ml5 fs26 cor_5D5">价格区间</view>
									<view class="unlimited_box" @tap="startPrice='',endPrice=''"
										:class="{'active':''== startPrice && ''== endPrice}">不限</view>
									<view class="mt30 df fldr fw aic">
										<view class="w157"><input type="text" v-model="startPrice" @confirm="minConfirm"
												@blur="minBlur" class="price_range_ipt" placeholder="最低价格"
												placeholder-style="color: #bebebe"></view>
										<view class="ml10 fs26 cor_5D5" style="font-weight: 500;">万</view>
										<view class="ml15 mr15 hor_line_1"></view>
										<view class="w157"><input type="text" v-model="endPrice" @confirm="maxConfirm"
												@blur="maxBlur" class="price_range_ipt" placeholder="最高价格"
												placeholder-style="color: #bebebe"></view>
										<view class="ml10 fs26 cor_5D5" style="font-weight: 500;">万</view>
									</view>
								</view><!-- 价格区间 -->

								<!-- 挖机吨位 -->
								<view class="mt30">
									<view class="ml5 fs26 cor_5D5">挖机吨位</view>
									<view class="unlimited_box" @tap="weightId=0" :class="{'active':0== weightId}">
										不限</view>
									<view class="df fldr fw">
										<!-- <view class="active type_tab_max">
                  <view class="">小挖</view>
                  <view class="mt20">6吨以下</view>
                </view> -->
										<view class="type_tab_max" :class="{'active':item.id== weightId}"
											v-for="(item, index) in filters.weights" :key="index">
											<view class="" @tap="weightCheck(item)">{{item.name}}</view>
											<!-- <view class="mt20">6-9吨</view> -->
										</view>

									</view>
								</view><!-- 挖机吨位 -->

								<!-- 挖机品牌 -->
								<view class="mt30">
									<view class="ml5 fs26 cor_5D5">挖机品牌</view>
									<view class="unlimited_box" @tap="brandId=0" :class="{'active':0== brandId}">不限
									</view>
									<view class="df fldr fw">
										<!-- <view class="active type_tab">卡特彼得</view> -->
										<view class="type_tab" :class="{'active':item.id== brandId}"
											@tap="brandCheck(item)" v-for="(item,index) in filters.brands" :key="index">
											{{item.name}}
										</view>
									</view>
									<!-- 展开 -->
									<!--   <view class="mt30 ml15 df aic" @click="labelAreaShow();" :class="labelAreaFlag ? 'dn' : ''">
                <view class="mr15 fs26 fwb cor_5D5">展开</view>
                <image src="/static/icon_arrow_2.png" class="img8"></image>               </view> -->
									<!-- 展开 -->

									<!-- 这是点击展开的内容区域 -->
									<!-- <</image> ontent_label_area" :class="labelAreaFlag ? 'active' : '' ">
                <view class="df fldr fw"> -->
									<!-- <view class="active type_tab">卡特彼得</view> -->
									<!--    <view class="type_tab" v-for="(item,index) in filters.brands" :key="index">{{item.name}}</view>
                </view>
              </view> -->
									<!-- 这是点击展开的内容区域 -->

								</view><!-- 挖机品牌 -->

							</view>
							<!-- 按钮 -->
							<view class="screen_bottom_area aic jcc">
								<view class="reset_btn"
									@tap="currentPage=1,startPrice='',endPrice='',brandId=0,typeId=0,weightId=0">重置
								</view>
								<view class="ml50 determine_btn" @click="searchConfirm()">确定</view>
							</view><!-- 按钮 -->
						</view>
						<view class="mask_bg" @click="screenHide();"></view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getMainFilterApi,
		getPageDiggerApi
	} from '@/http/api.js';

	export default {

		data() {
			return {
				screenFlag: false, //false代表筛选弹窗关闭着
				labelAreaFlag: false, //false代表筛选弹窗中的展开标签是没有显示多余的标签的,
				startPrice: '',
				endPrice: '',
				keywords: '',
				brandId: 0,
				typeId: 0,
				weightId: 0,
				currentPage: 1,
				hasNextPage: false,
				totalPage: 1,
				pageSize: 10,
				list: [],
				filters: {
					types: [{
						"id": 1,
						"name": "履带式"
					}],
					weights: [{
						"id": 1,
						"name": "小挖（6吨以下）"
					}],
					brands: [{
						"id": 1,
						"name": "卡特彼勒"
					}]
				},
			}
		},
		onLoad(e) {
			//plus.screen.lockOrientation('portrait-primary'); //锁定应用竖屏
			this.keywords = e.keywords;
			this.userId = uni.getStorageSync('userId');
			this.getMainFilter();
			this.searchConfirm();
		},
		onReachBottom() {

			this.searchConfirm();
		},
		methods: {
			getMainFilter() {
				var that = this;
				showLoading();
				getMainFilterApi({

				}).then(res => {
					that.filters = res.data;
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			brandCheck(item) {
				this.brandId = item.id;
			},

			weightCheck(item) {
				this.weightId = item.id;
			},

			typeCheck(item) {
				this.typeId = item.id;
			},

			minConfirm(e) {
				this.startPrice = e.detail.value;
			},

			minBlur(e) {
				this.startPrice = e.detail.value;
			},

			maxConfirm(e) {
				this.endPrice = e.detail.value;
			},

			maxBlur(e) {
				this.endPrice = e.detail.value;
			},

			keywordConfirm(e) {
				this.currentPage = 1;
				this.keywords = e.detail.value;
				this.searchConfirm();
			},

			clickSearch() {
				this.currentPage = 1;
				this.searchConfirm();
			},

			searchConfirm() {
				var that = this;
				this.screenHide();
				showLoading();
				getPageDiggerApi({
					pageIndex: this.currentPage,
					pageSize: this.pageSize,
					key: this.keywords,
					brandId: this.brandId,
					startPrice: this.startPrice == '' ? 0 : parseInt(this.startPrice),
					endPrice: this.endPrice == '' ? 0 : parseInt(this.endPrice),
					typeId: this.typeId,
					userId: this.userId,
					weightId: this.weightId
				}).then(res => {
					if (res.data.currentPage == 1) {
						that.list = res.data.data;
					} else {
						for (let i in res.data.data) {
							that.list.push(res.data.data[i]);
						}
					}
					if (res.data.data.length > 1) {
						that.currentPage = that.currentPage + 1;
					}
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},

			toDetail(id) {
				uni.navigateTo({
					url: '/pages/purchase_information_details/purchase_information_details?id=' + id
				})
			},



			screenShow: function() { //筛选弹窗-打开
				this.screenFlag = true
			},
			screenHide: function() { //筛选弹窗-关闭
				this.screenFlag = false
			},
			labelAreaShow: function() { //展开标签
				this.labelAreaFlag = true
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f6f6;
	}

	.pl16 {
		padding-left: 16rpx;
	}

	.pr16 {
		padding-right: 16rpx;
	}

	.search_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 85rpx 24rpx 25rpx;
		background-color: #fff;
		z-index: 3;
	}

	.menu_content_box_page {
		position: relative;
		/* height: calc(100vh - 177rpx); */
		background-color: #f7f6f6;
		padding-top: 177rpx;
	}

	.ipt_search {
		display: inline-block;
		width: 100%;
		padding: 0 20rpx;
		height: 69rpx;
		line-height: 69rpx;
		font-size: 26rpx;
		text-align: left;
		color: #000;
		background-color: #F4F2F2;
		outline: none;
		border: none;
		vertical-align: top;
		border-radius: 35rpx;
	}

	.icon_search_pos {
		position: absolute;
		top: 21rpx;
		left: 46rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}

	.shop_price_item {
		width: 350rpx;
		background-color: #fff;
		border-radius: 6rpx;
		margin-bottom: 15rpx;
	}

	.shop_price_item .content_area {
		padding: 15rpx 13rpx;
		height: 174rpx;
	}
</style>
